<script setup>
	import {
		ref
	} from 'vue'
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync() //safeAreaInsets 常量就包含了从 uni.getSystemInfoSync() 返回对象中 safeAreaInsets 属性的值
	//相当于const systemInfo = uni.getSystemInfoSync();const safeAreaInsets = systemInfo.safeAreaInsets;


	import {
		apiGetActivityList1
	} from '../../api/volunteer.js';
	import {
		apiGetActivityPhoto
	} from '../../api/volunteer.js';

	const activityList = ref([])
	var activityPhoto= ref([])
	const parameterModel = ref({
		pageNo: 1,
		pageSize: 3,
		// activityName: ''
	})
	const getActivityList = async () => {
		const res = await apiGetActivityList1(parameterModel.value)
		activityList.value = res.data.records
		// activityList.value.forEach((item) => {})
		console.log(activityList.value)

	}
	getActivityList();
	//轮播图函数 
	var PhotoKey=ref(0);
	var activityPhoto=ref([]);
	const  GetActivityPhoto= async () => {
		const res = await apiGetActivityPhoto();
		PhotoKey.value=PhotoKey.value+1;
		activityPhoto=res.data;
		console.log(activityPhoto)
	
	}
	GetActivityPhoto();
	const navList = ref([{
			id: 1,
			name: '技能培训',
			icon: "../../static/jinengpeixun.png",
			page: "/pages/skilltrain/skilltrain",
		},
		{
			id: 2,
			name: '活动赛事',
			icon: "../../static/a-bianzu1531.jpg",
			page: "pages/individual/individual",
		},
		{
			id: 3,
			name: '经费申报',
			icon: "../../static/icon_经费管理.png",
			page: "pages/individual/individual",
		},
		{
			id: 4,
			name: '福利兑换',
			icon: "../../static/fuli.png",
			page: "pages/individual/individual",
		}
	])

	function navigateTo(page) {
		uni.navigateTo({
			url: page
		})
	}
	// const bannerList = ref([{
	// 		id: 1,
	// 		imgUrl: '../../static/bg.jpg',

	// 	},
	// 	{
	// 		id: 2,
	// 		imgUrl: '../../static/bg.jpg',

	// 	},
	// 	{
	// 		id: 3,
	// 		imgUrl: '../../static/bg.jpg',

	// 	}
	// ])
	const viewMore = (page) => {
		console.log(page);
		if (page !== '/pages/skilltrain/skilltrain') {
			ClickNoUse(); // 调用ClickNoUse函数
		} else {
			uni.navigateTo({
				url: page,
			});
		}
	}

	function viewactivity() {
		uni.navigateTo({
			url: "/pages/allVolunteering/allVolunteering",
		})
	}
	//点击查看页面详情
	const goToDetail = (item) => {
		console.log(item.id);
		const recordsString = JSON.stringify(item.id);
		uni.navigateTo({
			// url: '../../pages/volunteerDetail/volunteerDetail?records=${encodeURIComponent(item.id)}',//页面传参，与下面的区别在于引号
			url: `../../pages/volunteerDetail/volunteerDetail?records=${encodeURIComponent(item.id)}` //页面传参,要先转成字符串
		})
	};

	function ClickNoUse() {
		uni.showToast({
			title: "功能尚未开放",
			icon: 'none', // 如果不想要默认的图标，可以设置为'none'
			duration: 2000 // 显示时长，默认为2000毫秒
		});
	}
</script>

<template>

	<view class="container">
		<view class="header" :style="{ paddingTop: safeAreaInsets.top + 15 + 'px' }">
			<view class="header-left">
				<image src="https://registration-system1.oss-cn-guangzhou.aliyuncs.com/0c32afdc-1840-47ec-b765-5d77c478f3d6.png" mode="widthFix"></image> 
				<view class="header-left-text">
					<p class="title">生动科普星</p>
					<p class="subheading">让科普更生动</p>
				</view>
			</view>
			<view class="header-right">

				<!-- <image src="../../static/扫码.png" mode="widthFix"></image> -->
			</view>
		</view>

		<view class="content">
			<ul class="nav-list">
				<li class="nav-item" v-for="item in navList" :key="item.id" @click="viewMore(item.page)">

					<image :src="item.icon" mode="widthFix" style="border-radius: 30rpx;"></image>

					<div class="nav-name">{{ item.name }}</div>
				</li>
			</ul>
			<!-- <common-swiper :list="activityPhoto"></common-swiper> -->
			<view class="carousel">
				<swiper :circular="true" :autoplay="true" :interval="3000" @change="onChange" :key="PhotoKey" >
					<swiper-item v-for="item in activityPhoto" :key="item.id">
						<navigator url="/pages/index/index" hover-class="none" class="navigator">
							<image mode="aspectFill" class="image" :src="item.imageUrl"></image>
						</navigator>
					</swiper-item>
				</swiper>
				<!-- 指示点 -->
				<view class="indicator">
					<text v-for="(item, index) in list" :key="item.id" class="dot"
						:class="{ active: index === activeIndex }"></text>
				</view>
			</view>
			
			<view style="padding: 20rpx;">
				<view class="activity-recommend">
					<view class="activity-recommend-title"> 
						<img class="recommend-title" src="@/static/activity-recommend.png" alt="">
						<span class="more" @click="viewactivity">查看更多志愿活动 <uni-icons type="right" size="15"
								color="#fff"></uni-icons></span>
					</view>
					<view class="activity-recommend-content">
						<view class="activity-recommend-item" v-for="item in activityList" :key="item"
							@tap="goToDetail(item)">
							<span class="label">
								{{item.tag}}
							</span>
							<!-- <span class="label">
								科普活动
							</span> -->
							<p class="item-name">{{item.activityName}}</p>
							<p class="item-organization">{{item.organization}}</p>
							<view class="item-bottom">
								<span class="item-time">{{item.beginTime}} - {{item.endTime}}</span>
								<span class="item-number">剩余名额 {{item.remainder}}</span>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view>客服电话：19034658892</view>
			<view>地址：广州番禺区小谷围蓝青街28号3栋102室</view>
			<view>版权所有：广东省科普志愿者协会</view>
			<view>粤ICP备05061531号</view>
			<view>粤公网安备 44011102001231号</view>
			<view class="organization">
				<image src="../../static/logo.jpg" mode="widthFix"></image>
				<span>广东省科普志愿者协会</span>
			</view>
		</view>

	</view>

</template>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;

		.header {
			width: 100%;
			height: 200rpx;
			// background-image: url(https://registration-system1.oss-cn-guangzhou.aliyuncs.com/f0b0c59e-8959-4376-a8cb-112c6f4d8045.png);
			background-image: url(https://registration-system1.oss-cn-guangzhou.aliyuncs.com/b516b7fd-1859-475b-a0df-c3fadc74d7cb.png);
			//设置背景图片
			background-size: cover;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;

			.header-left {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				width: 100%;
				height: 100%;

				image {
					width: 100rpx;
					height: 100rpx;

				}

				.header-left-text {
					margin-left: 20rpx;

					.title {
						font-size: 40rpx;
						font-weight: bold;
						color: #333;
					}

					.subheading {
						font-size: 30rpx;
						color: #666;
					}
				}
			}

			#aaa {
				width: 250px;
				height: 20px;
				position: relative;

				flex-direction: row;


			}

			.header-right {
				display: flex;
				position: relative;
				left: 50px;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				width: 100%;
				height: 100%;

				image {
					width: 80rpx;
					height: 80rpx;
					margin: 0 20rpx;
				}


			}
		}

		.content {
			width: 100%;
			height: 100%;
			background-color: #fff;
			border-radius: 40rpx;
			margin-top: -40rpx;
			overflow: hidden;


			.nav-list {
				display: flex;
				justify-content: space-between;

				.nav-item {
					width: 25%;
					height: 240rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						width: 100rpx;
						height: 100rpx;

					}

					.nav-name {
						font-size: 28rpx;
						color: #333;
						margin-top: 20rpx;

					}

				}

			}
            .carousel {
            	height: 310rpx;
            	position: relative;
            	overflow: hidden;
            	transform: translateY(0);
            	background-color: #efefef;
				
            
            	.indicator {
            		position: absolute;
            		left: 0;
            		right: 0;
            		bottom: 16rpx;
            		display: flex;
            		justify-content: center;
            
            		.dot {
            			width: 30rpx;
            			height: 6rpx;
            			margin: 0 8rpx;
            			border-radius: 6rpx;
            			background-color: rgba(255, 255, 255, 0.4);
            		}
            
            		.active {
            			background-color: #fff;
            		}
            	}
            
            	.navigator,
            	.image {
            		width: 100%;
            		height: 100%;
            	}
            }
			.activity-recommend {
				width: 100%;
				height: 100%;
				background-image: url(https://registration-system1.oss-cn-guangzhou.aliyuncs.com/492a291d-913e-473c-9aae-75f3a184460e.png);
				background-size: cover;
				border-radius: 30rpx;
				margin-top: 20rpx;
				overflow: hidden;
				padding: 20rpx;
				box-sizing: border-box;


				.activity-recommend-title {
					height: 64rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.recommend-title {
						margin-left: 20rpx;
						width: 240rpx;
						height: 56rpx;

					}

					.more {
						font-size: 30rpx;
						color: #fff;

					}
				}

				.activity-recommend-content {
					width: 100%;
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.activity-recommend-item {
						width: 100%;
						height: 100%;
						background-color: #fff;
						border-radius: 20rpx;
						margin-bottom: 20rpx;
						padding: 30rpx 40rpx;
						box-sizing: border-box;

						.label {
							width: 100rpx;
							height: 40rpx;
							background-color: #FFECF0;
							border-radius: 20rpx;
							text-align: center;
							line-height: 40rpx;
							color: #FB4457;
							font-size: 24rpx;
							padding: 10rpx 20rpx;
							margin-right: 20rpx;

						}

						.item-name {
							font-size: 34rpx;
							font-weight: bold;
							color: #000000e6;
							margin-top: 20rpx;
							margin-bottom: 10rpx;

						}

						.item-organization {
							font-size: 28rpx;
							color: #0006;
							margin-bottom: 10rpx;

						}

						.item-bottom {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 10rpx;
							color: #0006;
							font-size: 24rpx;

						}

					}
				}
			}
		}

		.footer {
			width: 100%;
			background-color: #f3f5f8;
			color: #999;
			font-size: 24rpx;
			text-align: center;
			padding: 20rpx 0;

			.organization {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;

				}
			}
		}
	}
</style>